<template>
  <div class="payment-record">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="record-list">
          <div class="record-none" v-if="records.length<1">暂无记录...</div>
            <van-cell-swipe class="record-item" v-for="(record, index) in records" :key="index" :right-width="65" :left-width="65" :on-close="onClose">
                <span slot="left">选择</span>
                <div class="record-wrap">
                    <img class="record-img" :src="defaultImage">
                    <div class="record-content">
                        <div class="record-title">{{record.type === 'course' ? '课程购买' : '充值'}}</div>
                        <div class="record-time">{{record.updated_at | date('YYYY-MM-DD')}}</div>
                        <div class="record-time">{{record.period > 0 ? '私教, 课时:' + record.period : '团操'}}</div>
                    </div>
                    <div class="record-amt">{{record.amount + '元'}}</div>
                </div>
                <span slot="right">删除</span>
            </van-cell-swipe>
        </div>
    </van-pull-refresh>
    <back :scroll="false"></back>
  </div>
</template>

<script>
import back from '../../components/base/back.vue'
export default {
  name: 'payment-record',
  comments: 'payment-record',
  components: {
    back
  },
  data () {
    return {
      isLoading: false,
      defaultImage: './static/images/充值1.png',
      records: []
    }
  },
  created () {
    document.title = '交易记录'
    this.getPayments()
  },
  methods: {
    onClose (clickPosition, instance) {
      switch (clickPosition) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          this.$dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            instance.close()
          })
          break
      }
    },
    // 下拉刷新
    onRefresh () {
      this.$axios.get('/users/' + JSON.parse(localStorage.user).id + '/orders').then(response => {
        this.records = response.data
        this.$toast('刷新成功')
        this.isLoading = false
      }).catch(error => {
        this.isLoading = false
        console.log(error)
      })
    },
    // 获取用户所有充值记录
    getPayments: function () {
      this.$axios.get('users/' + JSON.parse(localStorage.user).id + '/orders').then(response => {
        this.records = response.data
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.payment-record{
    height: auto;
    width: 100%;
    overflow-y: scroll;
}
.record-list{
    margin: 5px;
}
.record-none{
  color: #f8f8f8;
}
.record-item{
    border-bottom: 1px solid #fff;
    background-color: #504e4a;
}
.record-wrap{
    background-color: #3c3a3a;
    position: relative;
    height: 60px;
    width: 100%;
    color: #f8f8f8;
}
.record-detail{
    background-color: transparent;
    color: white;
}
.record-img{
    height: 30px;
    width: 30px;
    position: absolute;
    border-radius: 50%;
    background-repeat: no-repea;
    background-size: 100%;
    left: 5%;
    top: 15px;
}
.record-content{
    position: absolute;
    left: 20%;
    width: 50%;
    height: 100%;
    text-align: left;
}
.record-time{
    font-size: 0.6rem;
}
.record-amt{
    position: absolute;
    right: 5%;
    top: 15px;
}
.record-list div:first-child{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.record-list div:last-child{
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom: none;
}
.payment-search{
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 40px;
    height: 40px;
    z-index: 999;
    border-radius: 50%;
    background-color: #eb83ec;
    color: white;
    display: flex;
    justify-content: center;
}
.payment-search-icon{
    align-self: center;
}
</style>
